<!--
 * @Description: 公共页面
 * @Date: 2020-12-09 16:07:34
 * @LastEditors: lother
 * @LastEditTime: 2021-01-08 15:22:49
 * @FilePath: \AccounOpening-WEB\src\views\openProcess\Hopen\continent.vue
-->
<template>
  <div>
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      v-if="checkPermission(['openFlow@index'])"
    >
      <el-form-item :label="$t('Hopen.continent.56cjs25yjro0')">
        <el-input
          v-model="formInline.keywords"
          :placeholder="$t('Hopen.continent.56cjs25yjro0')"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" :loading="loading"
          >{{$t('Hopen.continent.56cjs25yl1g0')}}</el-button
        >
      </el-form-item>
    </el-form>
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <el-button
          type="success"
          @click="sort(user_type)"
          v-permission="['openFlow@pageSort']"
          >{{$t('Hopen.continent.56cjs25ylf00')}}</el-button
        >
        <el-dropdown placement="bottom-start" v-permission="['openFlow@save']">
          <span class="el-dropdown-link">
            <el-button type="primary">{{$t('Hopen.continent.56cjs25ylqc0')}}</el-button>
          </span>
          <el-dropdown-menu slot="dropdown">
            <span style="display: block" @click="add(user_type)">
              <el-dropdown-item>{{$t('Hopen.continent.56cjs25ym7s0')}}</el-dropdown-item>
            </span>
            <span @click="editPage('2', user_type)">
              <el-dropdown-item>{{$t('Hopen.continent.56cjs25ymvk0')}}</el-dropdown-item>
            </span>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <el-table
        :data="tableData"
        border
        :ref="'tableRef_' + user_type"
        v-permission="['openFlow@index']"
      >
        <el-table-column
          fixed
          prop="id"
          label="ID"
          width="100"
        ></el-table-column>
        <!-- <el-table-column label="证件类型"  width="150">
                    <template slot-scope="scope">
                        {{ scope.row.cardType | release(cardMode)}}
                    </template>
                </el-table-column> -->
        <el-table-column prop="type" :label="$t('Hopen.continent.56cjs25yn600')" width="150">
          <template slot-scope="scope">
            {{ scope.row.type | release(pageTpyeList) }}
          </template>
        </el-table-column>
        <el-table-column
          :prop="'name_' + langSufx"
          :label="$t('Hopen.continent.56cjs25yjro0')"
          minWidth="170"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column prop="status" :label="$t('Hopen.continent.56cjs25yneg0')" width="150">
          <template slot-scope="scope">
            <div
              class="switch"
              @click="
                switchChange(
                  scope.row,
                  checkPermission(['openFlow@switchStatus'])
                )
              "
            >
              <el-switch
                v-model="scope.row.status"
                :active-value="1"
                :inactive-value="0"
                disabled
              >
              </el-switch>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          :label="$t('Hopen.continent.56cjs25ynnc0')"
          width="150"
          v-if="checkPermission(['openFlow@read', 'openFlow@delete'])"
        >
          <template slot-scope="scope">
            <!-- <btn-tip
                        :content="$t('Hopen.continent.56cjs25ynvk0')"
                        type="success"
                        icon="el-icon-edit-outline"
                        @change="editPage(scope.row.type , scope.row.user_type , scope.row.id)"
                    >
                    </btn-tip> -->
            <!-- type2:固定  type1:自定义 -->
            <btn-tip
              v-permission="['openFlow@read']"
              v-if="scope.row.type == '2'"
              :content="$t('Hopen.continent.56cjs25yo3c0')"
              type="primary"
              icon="el-icon-edit"
              @change="editPage(scope.row.type, scope.row.user_type, scope.row)"
            ></btn-tip>
            <btn-tip
              v-if="scope.row.type=='1'"
                  :content="$t('Hopen.continent.56cjs25yo3c0')"
                  type="primary"
                  icon="el-icon-edit"
                  @change="add(scope.row.type , scope.row.id)"
              ></btn-tip>
            <btn-tip
              v-permission="['openFlow@delete']"
              :content="$t('Hopen.continent.56cjs25yobk0')"
              type="danger"
              icon="el-icon-delete"
              @change="del(scope.row)"
            ></btn-tip>
          </template>
        </el-table-column>
      </el-table>

      <!-- <pagination
                :total="listCount"
                :page.sync="tableShow.page"
                :page-size.sync="tableShow.limit"
                @pageChange="getList"
            /> -->
    </el-card>
    <!-- 排序 -->
    <sortTable ref="sortTable" :list="tableData"></sortTable>
    <!-- 新增页面 -->
    <addPage
      :pageType="user_type"
      ref="addPage"
      :fixedList="fixedList"
    ></addPage>
  </div>
</template>
<script>
import sortTable from "@/views/openProcess/Hopen/sortTable";
import addPage from "@/views/openProcess/Hopen/addPage";
import { cardMode, pageTpyeList } from "@/assets/js/common";

import { getList, putStatus, delFlow } from "@/api/openProcess/Hopen";

export default {
  components: {
    sortTable,
    addPage,
  },
  props: {
    user_type: {
      type: String,
      default: null,
    },
    label: {
      type: String,
      default: "",
    },
  },
  computed: {
    langSufx() {
      return this.$store.state.settings.langTail;
    },
  },
  data() {
    return {
      cardMode,
      pageTpyeList,
      formInline: {
        keywords: "",
      },
      tableShow: {
        page: 1,
        limit: 10,
      },
      listCount: 0,
      tableData: [],
      loading: false,
      fixedList: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    onSubmit() {
      this.loading = true;
      this.getList();
    },
    getList() {
      var obj = Object.assign({}, this.formInline, {
        user_type: this.user_type,
      });
      // var  obj = Object.assign({},this.formInline,this.tableShow,{user_type :this.type})
      var _this = this;
      getList(obj).then((res) => {
        _this.loading = false;
        if (res.code == 10000) {
          _this.tableData = res.data;
          _this.listCount = res.count;
          var obj = _this.tableData.map((item) => {
            if (item.type == "1") {
              return item.url_path;
            }
            return "";
          });
          _this.fixedList = obj.filter(Boolean);
        }
      });
    },
    del(row) {
      this.$confirm(this.$t('Hopen.continent.56cjs25yojk0'), this.$t('Hopen.continent.56cjs25yotg0'), {
        confirmButtonText: this.$t('Hopen.continent.56cjs25yp2g0'),
        cancelButtonText: this.$t('Hopen.continent.56cjs25ypdc0'),
        type: "warning",
      })
        .then(() => {
          delFlow(row.id).then((res) => {
            if (res.code == 10000) {
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: this.$t('Hopen.continent.56cjs25ypow0'),
          });
        });
    },
    // 状态改变
    switchChange(row, disabled) {
      if (!disabled) {
        this.$message({
          showClose: true,
          message: this.$t('Hopen.continent.56cjs25ypxw0'),
          type: "warning",
        });
        return false;
      }
      var statusTitle = row.status == 1 ? this.$t('Hopen.continent.56cjs25yq5s0') : this.$t('Hopen.continent.56cjs25yqe40');
      this.$confirm(this.$t('Hopen.continent.56cjs25yqpg0') + statusTitle, statusTitle, {
        confirmButtonText: this.$t('Hopen.continent.56cjs25yp2g0'),
        cancelButtonText: this.$t('Hopen.continent.56cjs25ypdc0'),
        type: row.status == 1 ? "warning" : "success",
      })
        .then(() => {
          putStatus(row.id).then((res) => {
            if (res.code == 10000) {
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: this.$t('Hopen.continent.56cjs25ypow0'),
          });
        });
    },
    // 排序
    sort(user_type) {
      this.$refs.sortTable.init(user_type);
    },
    // 新增
    add(user_type, id) {
      this.$refs.addPage.init(user_type, id);
    },
    // 修改
    editPage(type, user_type, rowItem) {
      rowItem = rowItem ?? {};
      var noObj = { type: type, user_type: user_type, rowItem: rowItem };
      this.$emit("indexConfig", noObj);
      
    },
    init() {
      this.$refs["tableRef_" + this.user_type].doLayout();
      this.$nextTick(() => {
        this.$refs["tableRef_" + this.user_type].doLayout();
      });
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
</style>